<template>
	<view class="text-hide" :class="[isVertical ? '' : 'flex flex-row']">
		<template v-if="isVertical">
			<view v-for="(el, i) in data" :key="i">
				<view class="row-center">
					<view class="w-4-4 text-center mr-1-3">
						<text
							class="iconfont text-xxl"
							:class="[el.icon, i === 0 ? '' : 'color-secondary']"
							:style="i === 0 ? { color: activeColor } : {}"
						></text>
					</view>
					<view class="flex-1">
						<text
							class="text-m mr-1-3"
							:class="[i === 0 ? 'font-semibold' : 'color-secondary']"
							:style="i === 0 ? { color: activeColor } : {}"
						>
							{{ el.title }}
						</text>
						<text class="color-secondary text-xn">{{ el.subTitle }}</text>
					</view>
					<!-- <view> <text class="iconfont icon-you color-secondary text-l"></text> </view> -->
				</view>
				<view class="flex flex-row items-stretch">
					<view class="w-4-4 flex-center mr-1-3 my-1">
						<view class="w-min bg-color-2 h-full" v-if="i !== data.length - 1"></view>
					</view>
					<view class="flex-1 pt-1-3" :class="[i !== data.length - 1 ? 'pb-5' : '']">
						<c-mix-text :value="el.content" :textColorClass="i === 0 ? 'color-main' : 'color-secondary'" />
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view v-for="(el, i) in data" class="text-center flex-1" :key="i">
				<view class="row-center">
					<view class="h-min flex-1 bg-b-color-2" :class="[i === 0 ? 'hidden' : '']"></view>
					<view
						class="h-2-2 w-2-2 rounded-full border-box mx-0-3"
						:class="[
							i > activeIndex ? 'border b-disable' : '',
							i === activeIndex ? '' : '',
							i < activeIndex ? 'bg-disable' : '',
						]"
						:style="i === activeIndex ? { backgroundColor: activeColor } : {}"
					></view>
					<view class="h-min flex-1 bg-b-color-2" :class="[i === data.length - 1 ? 'hidden' : '']"></view>
				</view>
				<text
					class="text-m block mt-1-3"
					:class="[
						i === activeIndex ? 'font-semibold color-main' : '',
						i < activeIndex ? 'color-main' : '',
						i > activeIndex ? 'color-disable' : '',
					]"
				>
					{{ el.title }}
				</text>
				<text class="mt-1 color-secondary text-xs block px-1-3" v-if="el.subTitle">{{ el.subTitle }}</text>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	props: {
		//title subTitle
		//icon content title subTitle
		data: Array,
		isVertical: Boolean,
		activeIndex: {
			default: -1,
			type: Number,
		},
		activeColor: {
			default: '#2F5CE8',
			type: String,
		},
	},
};
</script>
<style>
.steps-active-item {
	background-color: #3ddc84;
}
.steps-active-text {
	color: #3ddc84;
}
</style>
